<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CheckTree v 0.2 by JJ Geewax</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.checktree.0.3b1.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
	$("ul.tree").checkTree({
		/*
		// You can add callbacks to the expand, collapse, check, uncheck, and  halfcheck
		// events of the tree. The element you use as the argument is the LI element of
		// the object that fired the event.
		onExpand: function(el) {
			console.log("expanded ", el.find("label:first").text());
		},
		onCollapse: function(el) {
			console.log("collapsed ", el.find("label:first").text());
		},
		onCheck: function(el) {
			console.log("checked ", el.find("label:first").text());
		},
		onUnCheck: function(el) {
			console.log("un checked ", el.find("label:first").text());
		},
		onHalfCheck: function(el) {
			console.log("half checked ", el.find("label:first").text());
		}*/
		/*
		// You can set the labelAction variable to either "check" or "expand" 
		// to change what happens when you click on the label item.
		// The default is expand, which expands the tree. Check will toggle
		// the checked state of the items.
		labelAction: "expand"
		*/
		/*
		// You can also change what happens when you hover over a label (over and out)
		onLabelHoverOver: function(el) { alert("You hovered over " + el.text()); },
		onLabelHoverOut: function(el) { alert("You hovered out of " + el.text()); }
		*/
});


});
</script>

<link type="text/css" rel="stylesheet" href="checktree.css" />

</head>
<body>
<div style="margin-left:100px">
<ul class="tree" style="margin-left: 15px;">
	<li>
	    <input type="checkbox"/>
	    <label id="test">United States</label>
	    <ul>
			<li>
			<input type="checkbox" name="geo" value="pennsylvania"/>
	        <label>Pennsylvania</label>
		    </li>
		</ul>
	</li>
	<li>
		<input type="checkbox"/>
		<label>Canadia</label>
		<ul>
			<li>
				<input type="checkbox" name="geo" value="province in canadia"/>
				<label>Province In Canadia</label>
			</li>
		</ul>
	</li>
	<li>
		<input type="checkbox" name="geo" value="afghanistan"/>
		<label>Afghanistan</label>
	</li>
	<li>
		<input type="checkbox"/>
	    <label>Sealand</label>
		<ul>
			<li>
				<input type="checkbox" name="geo" value="tree_city"/>
				<label>Tree City</label>
			</li>
			<li>
				<input type="checkbox" name="geo" value="oil_province"/>
				<label>Oil Province</label>
				<ul>
					<li>
						<input type="checkbox" name="geo" value="oil_city"/>
						<label>Oil City</label>
					</li>
				</ul>
			</li>
			<li>
				<input type="checkbox" value="fun_province_checkbox"/>
				<label>Fun Province</label>
				<ul>
					<li>
						<input type="checkbox" name="geo" value="fun_city"/>
						<label>Fun City</label>
					</li>
					<li>
						<input type="checkbox" name="geo" value="not_fun_city"/>
						<label>Not Fun City</label>
						<ul>
							<li>
								<input type="checkbox" name="geo" value="add_one"/>
								<label>add_one</label>	
								<ul>
									<li>
										<input type="checkbox" name="geo" value="add_two"/>
										<label>add_two</label>							
									</li>
									<li>
										<input type="checkbox" name="geo" value="add_three"/>
										<label>add_three</label>							
									</li>
								</ul>						
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
    </li>
</ul>
</div>
</body>
</html>
